<template>
  <el-tooltip
    :placement="placement"
    :content="content"
    :offset="offset"
    :disabled="disabled"
  >
    <span
      ref="tipSpan"
      class="tooltip-span"
      :class="'line' + line"
      :style="{ lineHeight: lineHeight, textIndent: textIndent }"
      >{{ content }}</span
    >
  </el-tooltip>
</template>

<script>
export default {
  name: 'myToolTipComponent',
  data() {
    return {
      disabled: true
    };
  },
  props: {
    lineHeight: {
      default: '10rem',
      type: [Number, String]
    },
    textIndent: {
      default: '0',
      type: String
    },
    // 位置
    placement: {
      default: 'top',
      type: String
    },
    // 文本内容
    content: String,
    // 限制的行数
    line: {
      default: 3,
      type: [String, Number]
    },
    // 偏移量
    offset: {
      default: 0,
      type: Number
    }
  },
  watch: {
    content: {
      handler() {
        this.getDisable();
      }
    },
    line: {
      handler() {
        this.getDisable();
      }
    },
    lineHeight: {
      handler() {
        this.getDisable();
      }
    }
  },
  methods: {
    getDisable() {
      this.$nextTick(() => {
        const styles = window.getComputedStyle(this.$refs.tipSpan);
        const height = this.$refs.tipSpan.scrollHeight; //获取内容实际高度
        const lineHeight = styles['line-height']; // 获取内容实际行高
        this.disabled =
          Math.round(height / parseFloat(lineHeight)) <= Number(this.line); //四舍五入取行数
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tooltip-span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  @for $i from 1 through 10 {
    &.line#{$i} {
      -webkit-line-clamp: $i;
    }
  }
}
</style>